<template>
    <div id="maintainer_list">
        <div class="wrapper">
            <div class="maintainer_header">
                <img src="@/assets/master-modal.png" alt="">
            </div>
            <div class="maintainer_main">
                <div class="mainteiner_item" v-for="item in list" :key="item.id">
                    <div class="pic">
                        <img :src="item.avatar" alt="" v-if="item.avatar">
                        <img src="../../../assets/man3.jpg" alt="" v-else>
                    </div>
                    <div class="name">
                        <h2>{{ item.nickname }}</h2>
                        <p>服务次数：<span>99次</span></p>
                        <p>服务类型：<span>{{ item.service_type }}</span></p>
                    </div>
                    <div class="rate">
                        <strong>综合评分：</strong>
                        <el-rate v-model="rateValue" disabled show-score text-color="#ff9900" score-template="{value}">
                        </el-rate>
                    </div>
                    <div class="btn">
                        <el-button type="danger"
                        @click="$router.push({ path: '/user/placeorder', query: { id: item.id }})">给我下单</el-button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getAllMasterService } from '@/api/user'
export default {
  data () {
    return {
      // 评分
      rateValue: 4.6,
      list: []
    }
  },
  created () {
    this.getAllMaster()
  },
  methods: {
    async getAllMaster () {
      const res = await getAllMasterService()
      this.list = res.data.maintainers
    }
  }
}
</script>

<style lang="less" scoped>
#maintainer_list{
    .wrapper{
        background-color: #f8f8f8;
        padding: 0;
    }
    .maintainer_header{
        padding: 15px 0;
        text-align: center;
        background-color: #fff;

    }
    .maintainer_main{
        // margin-top: 30px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .mainteiner_item{
            background-color: #fff;
            margin: 15px 8px;
            padding: 8px;
            width: 45%;
            height: 120px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            // border: 1px solid #000;
            // border-radius: 5px ;
            transition: all .5s;
            .pic{
                height: 75%;
                img{
                    height: 100%;
                }
            }
        }
        .mainteiner_item:hover{
            transform: scale(1.05) translate(0, -5px);
        }
    }
}

</style>
